<template>
	<div class="yolo">
		<el-row style="margin-bottom: 8px;">
			<el-col>
				<el-button type="danger" icon="delete" @click="deleteAll">批量删除</el-button>
				<el-button type="primary" icon="refresh" @click="reload">刷新</el-button>
			</el-col>
		</el-row>
		<el-table :data="list" border style="width: 100%;" :preserve-expanded-content="false" @selection-change="handleSelectionChange">
			<el-table-column type="selection"/>
			<el-table-column type="index"/>
			<el-table-column type="expand">
				<template #default="props">
					<el-table :data="props.row.bboxes" border>
						<el-table-column label="识别类型" align="center" prop="category">
							<template #default="scope">
								{{translate(scope.row.category)}}
							</template>
						</el-table-column>
						<el-table-column label="高度" align="center" prop="bbox_h"/>
						<el-table-column label="宽度" align="center" prop="bbox_w"/>
						<el-table-column label="x轴坐标" align="center" prop="bbox_x"/>
						<el-table-column label="y轴坐标" align="center" prop="bbox_y"/>
						<el-table-column label="置信度" align="center" prop="confidence"/>
					</el-table>
				</template>
			</el-table-column>
			<el-table-column label="图片" width="150" align="center">
				<template #default="scope">
					<el-image :src="`/api${scope.row.result_image}`" :preview-src-list="[`/api${scope.row.result_image}`]" preview-teleported z-index="999"/>
				</template>
			</el-table-column>
			<el-table-column label="时间" align="center" prop="time">
				<template #default="scope">
					{{formatTime(scope.row.time)}}
				</template>
			</el-table-column>
			<el-table-column label="操作" width="120" align="center">
				<template #default="scope">
					<el-button type="danger" icon="delete" @click="deleteRecord(scope.row.id)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div style="margin-top: 8px; display: flex; justify-content: flex-end;">
			<el-pagination background layout="prev, pager, next" :total="total" @current-change="pageChange"/>
		</div>
	</div>
</template>
<script setup>
import {ref, reactive} from 'vue'
import {getYoloRecognitionRecord, deleteYOLOhistory} from '/@/api/yolo_model/hz-system-yolo-model-api'
import dayjs from "dayjs";
import {ElMessage, ElMessageBox} from "element-plus";
import {translate} from '/@/utils/translate.js'
const list = ref([])
const total = ref(0)
const listQuery = reactive({
	page: 1,
	pageSize: 10,
})
const getList = async () => {
	const res = await getYoloRecognitionRecord(listQuery)
	list.value = res.data.record
	total.value = res.data.total
}
const reload = ()=> {
	listQuery.page = 1
	listQuery.pageSize = 10
	getList()
}
getList()

const deleteRecord = id => {
	ElMessageBox.confirm(
		'确认删除该记录吗?',
		'Warning',
		{
			confirmButtonText: '确认',
			cancelButtonText: '取消',
			type: 'warning',
		}
	).then(async() => {
		const res = await deleteYOLOhistory(id)
		ElMessage({
			type: res.code == 200 ? 'success' : 'error',
			message: res.code == 200 ? '删除成功!' : '发生错误，请联系管理员!',
			duration: 2000
		})
		getList()
	})
}
const pageChange = page => {
	listQuery.page = page
	getList()
}
const formatTime = time => {
	return dayjs(time).format('YYYY-MM-DD HH:mm:ss')
}

const deleteIds = ref([])
const deleteAll = async ()=> {
	await ElMessageBox.confirm(
		'确认删除所选记录吗?',
		'Warning',
		{
			confirmButtonText: '确认',
			cancelButtonText: '取消',
			type: 'warning',
		}
	)
	try{
		let count = 0
		for (const id of deleteIds.value) {
			await deleteYOLOhistory(id)
			count++
			getList()
		}
		ElMessage({
			type: 'success',
			message: `已成功删除${count}条记录!`,
			duration: 2000
		})
		deleteIds.value = []
	}catch (e){
		ElMessage({
			type: 'error',
			message: '发生错误，请联系管理员!',
			duration: 2000
		})
	}
}
//表格多选
const handleSelectionChange = async (val) => {
	deleteIds.value = val.map(item => item.id)

}
</script>
<style scoped lang="scss">

</style>
